<form
  dForm
  ngForm
  [layout]="formLayout"
  [formGroup]="formGroup"
  [dValidateRules]="formConfig.rule"
  #form="dValidateRules"
  (ngSubmit)="submitForm()"
>
  <d-row [dGutter]="[24, 12]">
    <d-col [dSpan]="24">
      <d-form-item>
        <d-form-label [required]="true">{{ 'datadev.step.stepTitle' | translate }}</d-form-label>
        <d-form-control>
          <input dTextInput name="stepTitle" formControlName="stepTitle" [dValidateRules]="formConfig.stepTitleRules" />
        </d-form-control>
      </d-form-item>
    </d-col>
  </d-row>
  <d-row [dGutter]="[24, 12]">
    <d-col [dSpan]="24">
      <d-form-item>
        <d-form-label [required]="true">{{ 'datadev.step.sink-druid.coordinator_url' | translate }}</d-form-label>
        <d-form-control>
          <input dTextInput name="coordinator_url" formControlName="coordinator_url" [dValidateRules]="formConfig.coordinatorUrlRules" />
        </d-form-control>
      </d-form-item>
    </d-col>
  </d-row>
  <d-row [dGutter]="[24, 12]">
    <d-col [dSpan]="24">
      <d-form-item>
        <d-form-label [required]="true">{{ 'datadev.step.sink-druid.datasourceName' | translate }}</d-form-label>
        <d-form-control>
          <input dTextInput name="datasourceName" formControlName="datasourceName" [dValidateRules]="formConfig.datasourceNameRules" />
        </d-form-control>
      </d-form-item>
    </d-col>
  </d-row>
  <d-row [dGutter]="[24, 12]">
    <d-col [dSpan]="8">
      <d-form-item>
        <d-form-label>{{ 'datadev.step.sink-druid.timestamp_column' | translate }}</d-form-label>
        <d-form-control>
          <input dTextInput name="timestamp_column" formControlName="timestamp_column" />
        </d-form-control>
      </d-form-item>
    </d-col>
    <d-col [dSpan]="8">
      <d-form-item>
        <d-form-label>{{ 'datadev.step.sink-druid.timestamp_format' | translate }}</d-form-label>
        <d-form-control>
          <input dTextInput name="timestamp_format" formControlName="timestamp_format" />
        </d-form-control>
      </d-form-item>
    </d-col>
    <d-col [dSpan]="8">
      <d-form-item>
        <d-form-label>{{ 'datadev.step.sink-druid.timestamp_missing_value' | translate }}</d-form-label>
        <d-form-control>
          <input dTextInput name="timestamp_missing_value" formControlName="timestamp_missing_value" />
        </d-form-control>
      </d-form-item>
    </d-col>
  </d-row>
  <d-row [dGutter]="[24, 12]">
    <d-col [dSpan]="12">
      <d-form-item>
        <d-form-label>{{ 'datadev.step.sink-druid.parallelism' | translate }}</d-form-label>
        <d-form-control>
          <d-form-control>
            <d-input-number
              [min]="1"
              formControlName="parallelism"
              class="input-number">
            </d-input-number>
          </d-form-control>
        </d-form-control>
      </d-form-item>
    </d-col>
  </d-row>
</form>
